<template>
    <div class="father">
        <h2>我是父组件</h2>
        <h4>银子：{{ money }}万元</h4>
        <h4>汽车：{{ car.name }}--价格：{{ car.price }}万元</h4>
        <Child/>
    </div>
</template>

<script lang="ts" setup name="Father">
import Child from "@/components/Child.vue";
import {reactive, ref} from "vue";
import {provide} from "vue";

let money = ref(100)
let car = reactive({
    name: '奔驰',
    price: 100
})

function updateMoney(val) {
    money.value -= val
}

provide('qian', {money, updateMoney})
provide('che', car)
</script>

<style scoped>
.father {
    height: 700px;
    background-color: aqua;
}
</style>
